import React, { useEffect, useCallback, useState } from 'react';
import { getSysMarkFindMark } from '../../../../../../Api/communalUrl';

import { putLsCarWhiteInsertLsCarWhite, getLsCarWhiteEcho, postLsCarWhiteUpdateLsCarWhite } from '../../../../api'
import { Modal, Form, Input, message, Select } from 'antd';
const { Option } = Select;

/**
 * @description: 添加、修改白名单页面
 * @author: xiaoxujs
 * @updata: xiaoxujs（2021-08-16） 修改添加类型
 */

const AddVehicleModule = ({
    addVehicleModuleShow,
    setAddVehicleModuleShow,
    listFun,
    clickId,
    setClickId
}) => {
    const [form] = Form.useForm()
    const { validateFields, resetFields, setFieldsValue } = form;
    const [vehicleType, setVehicleType] = useState([]); //车辆类型
    const typeFun = useCallback(
        () => {
            /**
             * 产品类型: PRODUCT-TYPE 
                客户来源: RESOURCE 
                车辆类型: VEHICLE-TYPE 
                车牌颜色: LICENSE-COLOR 
                使用性质: USE-CHARACTER 
                排放阶段: STANDARD
             */
            //车辆类型
            ; (async () => {
                const { code, msg, data } = await getSysMarkFindMark({ typeCode: 'VEHICLE-TYPE' })
                if (code === '20000') {
                    setVehicleType(data)
                } else {
                    message.error(msg)
                }
            })();
        },
        [],
    )
    const detailsFun = useCallback(
        () => {
            if (clickId) {
                ; (async () => {
                    const { code, msg, data } = await getLsCarWhiteEcho({ id: clickId })
                    if (code === '20000') {
                        setFieldsValue(data)
                    } else {
                        message.error(msg)
                    }
                })()
            }
        },
        [clickId, setFieldsValue],
    )
    useEffect(() => {
        detailsFun();
        typeFun();
    }, [detailsFun, typeFun]);
    const handleOk = () => {
        validateFields().then(values => {
            values.state = 2;
            if (clickId) {
                values.id = clickId
                    ; (async () => {
                        const { code, msg } = await postLsCarWhiteUpdateLsCarWhite(values)
                        if (code === '20000') {
                            message.success('编辑成功！')
                            resetFields()
                            listFun()
                            setClickId(undefined)
                            setAddVehicleModuleShow(false)
                        } else {
                            message.error(msg)
                        }
                    })()
            } else {
                ; (async () => {
                    const { code, msg } = await putLsCarWhiteInsertLsCarWhite(values)
                    if (code === '20000') {
                        message.success('添加成功！')
                        resetFields()
                        listFun()
                        setClickId(undefined)
                        setAddVehicleModuleShow(false)
                    } else {
                        message.error(msg)
                    }
                })()
            }

        })
    };

    const handleCancel = () => {
        resetFields()
        setClickId(undefined)
        setAddVehicleModuleShow(false);
    };
    return <Modal
        title={clickId ? '编辑临时车辆' : '添加临时车辆'}
        visible={addVehicleModuleShow}
        onOk={handleOk}
        onCancel={handleCancel}
    >
        <Form
            labelCol={{ span: 8 }}
            wrapperCol={{ span: 16 }}
            form={form}
        >
            <Form.Item
                label="车主姓名"
                name="carMaster"
                rules={[{ required: true, message: '请输入车主姓名!' }]}
            >
                <Input />
            </Form.Item>
            <Form.Item
                label="车牌号"
                name="carNo"
                rules={[
                    { required: true, message: '请输入车牌号!' },
                    {
                        pattern: /(^[京津沪渝冀豫云辽黑湘皖鲁新苏浙赣鄂桂甘晋蒙陕吉闽贵粤青藏川宁琼使领A-Z]{1}[A-Z]{1}[A-Z0-9]{4}[A-Z0-9挂学警港澳]{1}$)/, message: '请输入正确车牌号'
                    }]}
            >
                <Input />
            </Form.Item>
            <Form.Item
                label="车主电话"
                name="mobile"
                rules={[
                    { required: true, message: '请输入车主电话!' },
                    {
                        pattern: /^1[3-9]\d{9}$/,
                        message: '请输入正确的手机号！'
                    }
                ]}
            >
                <Input />
            </Form.Item>
            <Form.Item
                label="车辆类型"
                name="vehicleType"
                rules={[{ required: true, message: '请选择车辆类型' }]}
            >
                <Select style={{ width: 240 }} >
                    {
                        vehicleType.map(item => <Option value={item.markValue} key={item.markValue}>{item.markName}</Option>)
                    }
                </Select>
            </Form.Item>
        </Form>
    </Modal>
}

export default AddVehicleModule